<template>
  <div class="list" v-if="!loading" :class="{ nodata: !listpage.list.length }">
    <a-row :gutter="16">
      <a-col
        :xs="24"
        :sm="12"
        :md="8"
        :lg="6"
        v-for="(library, index) in listpage.list"
        :key="index"
      >
        <a-card style="margin-bottom: 16px; background-color: #fafafa;" class="mycard" hoverable>
          <div class="name">{{ library.questionTypeName }}</div>
          <div class="num">
            错题数量: <span class="numnum">{{ library.questionNum }}</span>
          </div>
          <div class="myButton" @click="toExer(library)">查看试题</div>
        </a-card>
      </a-col>
    </a-row>
    <el-empty
      class="testInfoempty"
      :image-size="240"
      v-if="!listpage.list.length"
      description="恭喜您，暂无错题"
    />
  </div>
  <a-skeleton active v-else />
  <!-- <el-pagination 
          v-model:current-page="listpage.curPage"
          v-model:page-size="listpage.pageSize" 
          :total="listpage.total" 
          background
          layout="prev, pager, next" 
          :hide-on-single-page="true" 
          @size-change="query"
          @current-change="query"
          @prev-click="query"
          @next-click="query"
      /> -->
</template>

<script lang="ts" setup>
import http from "@/request";
import { useDictStore } from "@/stores/dict";
import dayjs from "dayjs";
import { ElMessage } from "element-plus";
import { onMounted, reactive, watch, ref } from "vue";
import { useRouter, useRoute } from "vue-router";

//  定义变量

const route = useRoute();
const router = useRouter();
const loading = ref(false);
const listpage = reactive({
  // 分页列表
  curPage: 1,
  pageSize: 12,
  total: 0,
  list: [] as any[],
});

// 组件挂载完成后，执行如下方法
onMounted(() => {
  query();
});

// 如果是跳转到列表页，重新查询
watch(
  () => route.path,
  (n, o) => {
    if (n === "/myExer") {
      query();
    }
  }
);

// 查询
async function query() {
  loading.value = true;
  const {
    data: { code, data },
  } = await http.post("myCollect/listpage", {
    type: 1,
  });

  if (code !== 200) {
    return;
  }
  loading.value = false;
  listpage.list = data.list;
  listpage.total = data.total;
}

// 练习进入
async function toExer(exer: any) {
  router.push(`/myErr/paper/${exer.id}`);
}
</script>

<style lang="scss" scoped>
.list {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  height: calc(100vh - 190px);
  padding-top: 20px;
    background:#F5F5F5;
  :deep .ant-row {
    width: 100%;
  }
}
.nodata {
  justify-content: center;
}
.mycard {
  :deep .ant-card-body {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    text-align: center;
    align-items: center;
  }
  .name {
    font-size: 16px;
    font-weight: 600;
    margin-top: 10px;
  }
  .num {
    font-size: 14px;
    color: #333;
    margin-top: 10px;
  }
  .numnum {
    font-size: 18px;
    color: #46a6ff;
  }
  .myButton {
    margin-top: 10px;
    width: 120px;
    height: 40px;
    line-height: 40px;
    border-radius: 20px;
    background: linear-gradient(to right, #24b0fb, #1c90fa);
    color: #fff;
    font-size: 16px;
    cursor: pointer;
    &:hover {
      background-color: #46a6ff;
    }
  }
}
</style>
